import React from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Test from './pages/Test'
// 需求: Home和Login是两个一级路由组件, Test是Home里面的二级路由组件.Test渲染在Home组件中hr下面
export default function App() {
  return (
    <div>
      {/* Link默认是添加历史记录,写了replace则变成替换历史记录 */}
      <Link to="/home" replace>
        home
      </Link>
      <Link to="/login" state={['a', 'b', 'c']}>
        login
      </Link>
      <hr />
      <Routes>
        <Route path="home" element={<Home></Home>}>
          <Route path="test" element={<Test></Test>}></Route>
        </Route>
        {/* 路径后面写/:参数名,这是在定义路由参数. 注意: 定义了路由参数,则路由参数为必填项 */}
        {/* 注意: 如果路由参数后面加?,则表示这个路由参数是可选的 */}
        {/* <Route path="login/:id?" element={<Login></Login>}></Route> */}

        {/* 注意: 6版本最早不支持?.实现可选路由参数的方式如下:  */}
        <Route path="login">
          <Route path=":id" element={<Login></Login>}></Route>
          <Route path="" element={<Login></Login>}></Route>
        </Route>

        {/* 上面的代码,其实和下面的是一样的 */}
        {/* <Route path="/login/:id" element={<Login></Login>}></Route>
        <Route path="/login" element={<Login></Login>}></Route> */}
      </Routes>
    </div>
  )
}
